<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>作业</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            ul li{
                float: left;
                padding: 10px 20px;
                margin: 10px;
            }
            .active{
                background-color: plum;
            }
        </style>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <ul>
                <li v-for="(item,index) in arr" @click="changed(index)" v-bind:class="index === num ? 'active' : '' ">{{item}}</li>
            </ul>
        </div>
    </body>

    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                arr: ["新闻","电影","娱乐","体育","军事"],
                num: ''
            },
           methods: {
                changed(index){
                    // console.log(index);
                    // console.log(this.num);
                    this.num = index
                }
           }
        })
        
    </script>
</html>